﻿@{
ViewData["Title"] = "首页";
}

<div class="layui-row">
	<!-- 今日采购单 -->
	<div class="layui-col-md3">
		<div style="margin: 22px; background-color: #fff; padding: 20px;">
			<div class="layui-row">
				<span class="layui-col-md11">今日采购单</span>
				<i class="layui-icon layui-icon-tips layui-col-md1"></i>
			</div>
			<div class="layui-row layui-font-32 layui-font-black" style="margin: 20px 0px;">
				￥<span id="d1">0</span>
			</div>
			<div class="layui-row" style="border-bottom: 1px solid lightgray; padding-bottom: 7px;">
				单据数量：<span class="layui-font-black" id="d11">0</span>
			</div>
		</div>
	</div>

	<!-- 本月采购单 -->
	<div class="layui-col-md3">
		<div style="margin: 22px; background-color: #fff; padding: 20px;">
			<div class="layui-row">
				<span class="layui-col-md11">本月采购单</span>
				<i class="layui-icon layui-icon-tips layui-col-md1"></i>
			</div>
			<div class="layui-row layui-font-32 layui-font-black" style="margin: 20px 0px;">
				￥<span id="d2">0</span>
			</div>
			<div class="layui-row" style="border-bottom: 1px solid lightgray; padding-bottom: 7px;">
				单据数量：<span class="layui-font-black" id="d22">0</span>
			</div>
		</div>
	</div>

	<!-- 今日销售单 -->
	<div class="layui-col-md3">
		<div style="margin: 22px; background-color: #fff; padding: 20px;">
			<div class="layui-row">
				<span class="layui-col-md11">今日销售单</span>
				<i class="layui-icon layui-icon-tips layui-col-md1"></i>
			</div>
			<div class="layui-row layui-font-32 layui-font-black" style="margin: 20px 0px;">
				￥<span id="d3">156,720</span>
			</div>
			<div class="layui-row" style="border-bottom: 1px solid lightgray; padding-bottom: 7px;">
				单据数量：<span class="layui-font-black" id="d33">1</span>
			</div>
		</div>
	</div>

	<!-- 本月销售单 -->
	<div class="layui-col-md3">
		<div style="margin: 22px; background-color: #fff; padding: 20px;">
			<div class="layui-row">
				<span class="layui-col-md11">本月销售单</span>
				<i class="layui-icon layui-icon-tips layui-col-md1"></i>
			</div>
			<div class="layui-row layui-font-32 layui-font-black" style="margin: 20px 0px;">
				￥<span id="d4">156,720</span>
			</div>
			<div class="layui-row" style="border-bottom: 1px solid lightgray; padding-bottom: 7px;">
				单据数量：<span class="layui-font-black" id="d44">1</span>
			</div>
		</div>
	</div>

</div>

<div class="layui-row">
	<!-- 当前库存 -->
	<div class="layui-col-md6">
		<table class="layui-table" style="margin-top: 20px;">
			<colgroup>
				<col>
				<col>
			</colgroup>
			<thead>
				<tr>
					<th>物品名称</th>
					<th>库存数量</th>
				</tr>
			</thead>
			<tbody id="kc">
				<tr>
					<td>加载中...</td>
					<td>加载中...</td>
				</tr>
			</tbody>
		</table>
	</div>

	<!-- 销售曲线（按月） -->
	<div class="layui-col-md6">
		<div id="echartsMain" style="height: 500px; background-color: #fff; margin: 20px;"></div>
	</div>

</div>
@section Scripts {
<script>
	$(function() {
		//获取今日采购单金额、单据数量
		fetch('/api/Goods/QueryToday')
			.then(response => {
				if (!response.ok) {
					throw new Error('网络响应不正常');
				}
				return response.json();
			})
			.then(data => {
				const d1 = document.getElementById("d1");
				const d11 = document.getElementById("d11");
				d1.textContent = data.totalAmount;
				d11.textContent = data.orderCount;
			})
			.catch(error => {
				console.log("错误，返回：" + error);
			});

		//获取本月采购单金额、单据数量
		fetch('/api/Goods/QueryMonth')
			.then(response => {
				if (!response.ok) {
					throw new Error('网络响应不正常');
				}
				return response.json();
			})
			.then(data => {
				const d2 = document.getElementById("d2");
				const d22 = document.getElementById("d22");
				d2.textContent = data.totalAmount;
				d22.textContent = data.orderCount;
			})
			.catch(error => {
				console.log("错误，返回：" + error);
			});

		//获取今日销售单金额、单据数量
		fetch('/api/Goods/QueryToday2')
			.then(response => {
				if (!response.ok) {
					throw new Error('网络响应不正常');
				}
				return response.json();
			})
			.then(data => {
				const d3 = document.getElementById("d3");
				const d33 = document.getElementById("d33");
				d3.textContent = data.totalAmount;
				d33.textContent = data.orderCount;
			})
			.catch(error => {
				console.log("错误，返回：" + error);
			});

		//获取当月销售单金额、单据数量
		fetch('/api/Goods/QueryMonth2')
			.then(response => {
				if (!response.ok) {
					throw new Error('网络响应不正常');
				}
				return response.json();
			})
			.then(data => {
				const d4 = document.getElementById("d4");
				const d44 = document.getElementById("d44");
				d4.textContent = data.totalAmount;
				d44.textContent = data.orderCount;
			})
			.catch(error => {
				console.log("错误，返回：" + error);
			});

		//实例化图表
		var myChart = echarts.init(document.getElementById('echartsMain'));
		var myChartData1 = [];
		var myChartData2 = [];
		fetch('/api/Goods/GetLastSixMonthsSalesSummary')
			.then(response => {
				if (!response.ok) {
					throw new Error('网络响应不正常');
				}
				return response.json();
			})
			.then(data => {
				for (let item of data) {
					myChartData1.push(item.totalAmount);
					myChartData2.push(item.year + '-' + item.month);
				}
				option = {
					title: {
						text: '近半年销售走势',
						left: 'center'
					},
					grid: {
						left: '6%',
						right: '3%',
						top: '16%',
						bottom: '12%'
					},
					xAxis: {
						type: 'category',
						data: myChartData2
					},
					yAxis: {
						type: 'value'
					},
					series: [{
						data: myChartData1,
						type: 'line'
					}]
				};
				myChart.setOption(option);
			})
			.catch(error => {
				console.log("错误，返回：" + error);
			});

		//获取库存
		fetch('/api/Goods/GetInventory')
			.then(response => {
				if (!response.ok) {
					throw new Error('网络响应不正常');
				}
				return response.json();
			})
			.then(data => {
				const tb = document.getElementById('kc');
				let str = '';
				for(const [name, value] of Object.entries(data)){
					str += `
								<tr>
									<td>${name}</td>
									<td>${value}</td>
								</tr>`;
				}
				kc.innerHTML = str;
				//渲染select表单
				layui.use(function() {
					let form = layui.form;
					form.render('select');
				});
			})
			.catch(error => {
				console.log("错误，返回：" + error);
			});
	});
</script>
}